<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>FACE TRACKING USING JEELIZ FACEFILTER API DEMO</title>
    </head>
    
    <body style='text-align: center'>
        <canvas width="600" height="600" id='faceTrackCanvas'></canvas>

        <!-- INCLUDE JEELIZ FACEFILTER SCRIPT -->
        <script src="https://appstatic.jeeliz.com/faceFilter/jeelizFaceFilter.js"></script>

        <!-- HELPER TO USE CANVAS2D WITHOUT TAKING CARE OF WEBGL -->
        <script src="https://appstatic.jeeliz.com/faceFilter/Canvas2DDisplay.js"></script>

        <script>
            var CVD; //return of Canvas2DDisplay

            JEEFACEFILTERAPI.init({
                canvasId: 'faceTrackCanvas',
                NNCpath: 'https://appstatic.jeeliz.com/faceFilter/', //root of NNC.json file

                //called when video stream is ready and lib initialized :
                callbackReady: function(errCode, spec){
                    if (errCode) throw(errCode);
                    CVD = JEEFACEFILTERAPI.Canvas2DDisplay(spec);
                    CVD.ctx.strokeStyle='yellow';
                }, //end callbackReady()

                //called at each render iteration (drawing loop) :
                callbackTrack: function(detectState){
                    if (detectState.detected>0.6){
                        //draw a border around the face
                        var faceCoo=CVD.getCoordinates(detectState);
                        CVD.ctx.clearRect(0,0,CVD.canvas.width, CVD.canvas.height);
                        CVD.ctx.strokeRect(faceCoo.x, faceCoo.y, faceCoo.w, faceCoo.h);
                        CVD.update_canvasTexture();
                    }
                    CVD.draw();
                } //end callbackTrack()
            }); //end JEEFACEFILTERAPI.init call
        </script><br/>
        <a href='https://github.com/jeeliz/jeelizFaceFilter'>Github repository</a>
    </body>
</html> 
